<template>
    <view class="container">
        <view class="head">
            <view class="info-box">
                <view class="title">
                    联系人姓名：
                </view>
                <view class="input-box">
                    <input v-model="name" class="input" type="text" placeholder="请输入联系人姓名" />
                </view>
                <view class="title">
                    企业名称：
                </view>
                <view class="input-box row">
                    <input v-model="enterprise" @input="onEnterprise" @click="isTips = true" class="input" type="text"
                        placeholder="请输入企业名称" />
                    <img class="more-img" src="@/static/score/more.png" alt="" />
                    <view class="tip" v-if="isTips">
                        <scroll-view class="scroll-box" scroll-y>
                            <view class="tip-li" v-for="(item, index) in tipList" :key="index" @click="onTip(item.companyName,item.companyId)">
                                {{ item.companyName }}
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <div class="danger" v-show="showdanger">该企业已被系统录入</div>
                <view class="title">
                    手机号：
                </view>
                <view class="input-box">
                    <input type="number" maxlength="11" v-model="phone" class="input" placeholder="请输入手机号" />
                </view>
                <view class="title">
                    性别：
                </view>
                <view class="input-box row">
                    <picker class="input" :value="sex" :range="sexList" @change="onSexChange">
                        <view class="uni-input">{{ sexList[sex] }}</view>
                    </picker>
                    <img class="more-img" src="@/static/score/more.png" alt="" />
                </view>
                <view class="title">
                    备注：
                </view>
                <view class="input-box">
                    <textarea v-model="remarks" class="textarea-input" placeholder="请填写备注" />
                </view>
            </view>
        </view>
        <view class="btn-box row">
            <button class="short-btn white" @click="onCancel">
                取消
            </button>
            <button class="short-btn" @click="onAddContacts">
                保存
            </button>
        </view>
    </view>
</template>
<script setup lang="ts" >
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { addproductdealcontactapi, checkcompanyisopenapi, getcompanylist } from '../../../api/contact'
import { toast, shake, confirm } from '../../../utils/util'
import user from '../../../utils/user';
const tipList = ref<any>([])
const isTips = ref(false)
const tipId = ref()
const name = ref('')
const enterprise = ref('')
const phone = ref('')
const sex = ref(0)
const sexList = ref(['男', '女'])
const remarks = ref('')
onLoad(async (options) => {
    console.log(options);
    dealId.value = options.dealId
    await user.waitLogin()
})
const onAddContacts = async () => {
    const reName = /^[\u4E00-\u9FA5]/
    const rePhone = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/
    if (!reName.test(name.value)) {
        toast('只能以汉字开头')
        return
    }
    if (!name.value) {
        toast('请输入名称')
        return
    }
    if (!enterprise.value) {
        toast('请选择企业名称')
        return
    }
    if (!rePhone.test(phone.value)) {
        toast('请输入正确的手机号')
        return
    }
    if (!phone.value) {
        toast('请输入手机号')
        return
    }
    if (showdanger.value) {
        uni.showModal({
            title: '提示',
            content: '该手机号码已被录入过，确定继续录入？',
            success: async (res) => {
                if (res.confirm) {
                    await onNewContacts()
                    toast('新建成功')
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        })
                    }, 500)
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        })
    } else {
        await onNewContacts()
        toast('新建成功')
        setTimeout(() => {
            uni.navigateBack({
                delta: 1
            })
        }, 500)
    }
}
const dealId = ref<any>(null)
// 新建联系人
const onNewContacts = async () => {
    const result = await addproductdealcontactapi({
        customName: name.value,
        phone: phone.value,
        sex: sex.value,
        companyName: enterprise.value,
        remark: remarks.value,
        companyId: tipId.value,
        dealId: dealId.value*1
    })
    console.log(result, 'result')
}
// 性别选择
const onSexChange = (event: { detail: { value: string } }) => {
    sex.value = Number(event.detail.value)
}
const onTip = async (name: string,id:any) => {
    enterprise.value = name
    tipId.value = id
    isTips.value = false
    // checkcompanyisopenapi({ companyName: name }).then((res: any) => {
    //     console.log(res)
    //     if (res) {
    //         showdanger.value = true
    //     } else {
    //         showdanger.value = false
    //     }
    // })
}
const showdanger = ref(false)
const getEnterprise = async () => {
    const result = await getcompanylist({
        companyName: enterprise.value,
    })
    console.log(result, 'result')
    // if (!result.hasNextPage) {
    //     isNextPage.value = false
    // }
    // const arr:any = []
    // arr.push(...tipList.value)
    // arr.push(...result.list)
    tipList.value = result.list
}
const pageNum = ref(1)
const pageSize = ref(50)
const isNextPage = ref(true)
const onEnterprise = async () => {
    shake(async () => {
        pageNum.value = 1
        isNextPage.value = true
        tipList.value = []
        if (enterprise.value) {
            isTips.value = true
            await getEnterprise()
        } else {
            isTips.value = false
            await getEnterprise()
        }
        console.log(enterprise.value, 'enterprise')
    })
}
const onCancel = () => {
    uni.navigateBack({
        delta: 1
    })
}
</script>
<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #FAFAFC;
}

.head {
    padding: 30rpx;
}

.info-box {
    padding: 30rpx;
    background-color: #ffffff;
    border-radius: 16rpx;

    .title {
        color: #565868;
        font-size: 28rpx;
        font-weight: normal;
    }

    .input-box {
        border-bottom: 1rpx solid rgba(#9497B1, 0.1);
        margin-bottom: 29rpx;

        .input {
            font-size: 32rpx;
            color: #202536;
            border: none;
            padding-left: 2rpx;
            margin-top: 0rpx;
        }

        .more-img {
            width: 50rpx;
            height: 35rpx;
        }

        .textarea-input {
            width: 100%;
            margin-top: 24rpx;
            padding: 30rpx 24rpx;
            background: #F4F4F7;
            border-radius: 8rpx;
            font-size: 28rpx;
        }
    }
}

.btn-box {
    padding: 0 60rpx 30rpx 60rpx;
}

.scroll-box {
    max-height: 60vw;
}

.danger {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 23rpx 0;
    color: #FF7642;
    font-size: 24rpx;
}
</style>
